<template>
	<div class="div-user-sum">
		<div class="div-user-top">
			<span>角色管理</span>
		</div>
		<el-button type="primary" style="margin:0 0 10px 10px" @click="addRoleDialog=true" icon="el-icon-circle-plus-outline">添加角色</el-button>
		<el-button type="danger" :disabled="!multipleSelect || multipleSelect.length<=0" @click="removeRoles">批量删除<span v-show='multipleSelect && multipleSelect.length>0'>（{{multipleSelect.length}}）</span></el-button>
		<div style="margin: 10px;">
			<el-table :data="tableRole" border @selection-change="selectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="roleName" label="角色名称" align="center">
				</el-table-column>
				<el-table-column prop="roleSign" label="角色标识" align="center">
				</el-table-column>
				<el-table-column prop="createDate" label="创建时间" align="center">
				</el-table-column>
				<el-table-column prop="remark" label="描述" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" @click="openEdit(scope.row)" size="small">编辑</el-button>
						<el-button type="danger" @click="removeRole(scope.row.roleId)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="width: 100%;margin: 15px 0;text-align: center;" v-show="tableRole && tableRole.length>0">
				<el-pagination background layout="total" :total="tableRole.length">
				</el-pagination>
			</div>
		</div>
		<!-- 添加角色 -->
		<el-dialog title="添加角色" :show-close='false' :close-on-press-escape='false' :close-on-click-modal="false" :visible.sync="addRoleDialog" width="380px">
			<el-form :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="角色名称" prop="roleName" label-width="90px">
					<el-input v-model="addForm.roleName" placeholder='请输入角色名称' clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色标识" prop="roleSign" label-width="90px">
					<el-input v-model="addForm.roleSign" placeholder='请输入角色标识' clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="remark" label-width="90px">
					<el-input v-model="addForm.remark" placeholder='请输入角色描述' clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色权限" prop="menuIds" label-width="90px">
					<div class="eltreeBox">
						<el-tree :data="menuData" node-key='id' :props="props" show-checkbox ref='addTree' @check-change="addRoleChange">
						</el-tree>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetAdd">取 消</el-button>
				<el-button type="primary" @click="addRole" :disabled='dataloading'>确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑角色窗口 -->
		<el-dialog title="编辑角色" :show-close='false' :close-on-press-escape='false' :close-on-click-modal="false" :visible.sync="editRoleDialog" width="380px" @opened='editOpend'>
			<el-form :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="角色标识" prop="roleSign" label-width="90px">
					<el-input v-model="editForm.roleSign" placeholder='请输入角色标识' readonly  clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色名称" prop="roleName" label-width="90px">
					<el-input v-model="editForm.roleName" placeholder='请输入角色名称' clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop="remark" label-width="90px">
					<el-input v-model="editForm.remark" placeholder='请输入角色描述' clearable>
					</el-input>
				</el-form-item>
				<el-form-item label="角色权限" prop="menuIds" label-width="90px">
					<div class="eltreeBox">
						<el-tree :default-expand-all='true' :data="menuData" :check-strictly='checkStrictly' node-key='id' :props="props" show-checkbox ref='editTree' @check-change="editRoleChange">
						</el-tree>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetEdit">取 消</el-button>
				<el-button type="primary" @click="editRole">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { roleList, getRole, addRole, updateRole, deleteRole, deleteRoles } from '@/api/sysRole.js'
	import { routerList, getRoleMenu } from '@/api/sysMenu.js'
	import { DateFormat } from '@/utils/date.js'
	export default {
		name: 'Role',
		data() {
			return {
				menuData: [],
				tableRole: [],
				dataloading:false,
				addRoleDialog: false,
				editRoleDialog: false,
				checkStrictly: true,
				multipleSelect: [],
				props: {
					label: 'text',
				},
				addForm: {
					roleName: '',
					roleSign: '',
					remark: '',
					menuIds: [],
				},
				editForm: {
					roleId: '',
					roleName: '',
					roleSign: '',
					remark: '',
					menuIds: [],
				},
				rules: {
					roleName: [{
						required: true,
						message: '请输入角色名称'
					}],
					roleSign: [{
						required: true,
						message: '请输入角色标识'
					}],
					remark: [{
						required: true,
						message: '请输入角色描述'
					}],
//					menuIds: [{
//						required: true,
//						message: '请选择角色权限'
//					}]
				}
			}
		},
		created() {
			this.getRoleList();
			this.getRouterList();
		},
		methods: {
			getRouterList() {
				routerList({}).then(async res => {
					this.menuData = res.children
				})
			},
			getRoleList() {
				roleList({}).then(async res => {
					this.tableRole = res.data;
				});
			},
			addRoleChange() {
				var checkedNodes = this.$refs.addTree.getCheckedNodes(false, true);
				var checkedKeys = [];
				checkedNodes.map(item => {
					checkedKeys.push(item.id)
				})
				this.addForm.menuIds = checkedKeys;
			},
			addRole() {
				this.dataloading = true;
				setTimeout(_ => {
					this.dataloading = false;
				}, 1000)
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						addRole({
							roleName: this.addForm.roleName,
							roleSign: this.addForm.roleSign,
							remark: this.addForm.remark,
							menuIds: this.addForm.menuIds,
						}).then(async res => {
							if(res.code == "OK") {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.resetAdd();
								this.getRoleList();
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								});
							}
						})
					}
				})
			},
			resetAdd() {
				this.$refs.addTree.setCheckedNodes([]);
				this.$refs.addForm.resetFields();
				this.$refs.addForm.clearValidate()
				this.addRoleDialog = false;
			},
			openEdit(item) {
				getRoleMenu({
					roleId: item.roleId
				}).then(res => {
					this.editRoleDialog = true;
					this.checkStrictly = true;
					this.editForm.menuIds = res.data;
					this.editForm.roleId = item.roleId;
					this.editForm.roleName = item.roleName;
					this.editForm.roleSign = item.roleSign;
					this.editForm.remark = item.remark;
				})
			},
			editOpend() {
				this.$refs.editTree.setCheckedKeys(this.editForm.menuIds);
				this.checkStrictly = false;
			},
			editRoleChange() {
				var checkedNodes = this.$refs.editTree.getCheckedNodes(false, true);
				var checkedKeys = [];
				checkedNodes.map(item => {
					checkedKeys.push(item.id)
				})
				this.editForm.menuIds = checkedKeys;
			},
			editRole() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						updateRole({
							roleName: this.editForm.roleName,
							roleSign: this.editForm.roleSign,
							remark: this.editForm.remark,
							menuIds: this.editForm.menuIds,
							roleId: this.editForm.roleId,
						}).then(async res => {
							if(res.code == "OK") {
								this.$message({
									message: '编辑成功',
									type: 'success'
								});
								this.resetEdit();
								this.getRoleList();
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								});
							}
						})
					}
				})
			},
			resetEdit() {
				this.editForm.menuIds = [];
				this.editForm.roleId = '';
				this.editForm.roleName = '';
				this.editForm.roleSign = '';
				this.editForm.remark = '';
				this.$refs.editForm.clearValidate()
				this.$refs.editTree.setCheckedNodes([]);
				this.editRoleDialog = false;
			},
			selectionChange(val) {
				this.multipleSelect = val;
			},
			removeRoles() {
				var multipleSelect = this.multipleSelect;
				if(multipleSelect && multipleSelect.length > 0) {
					var ids = []
					multipleSelect.map(item => {
						ids.push(item.roleId)
					})
					ids = ids.join(',')
					this.$confirm('是否删除这些角色?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						deleteRoles({
							ids: ids
						}).then(async res => {
							if(res.code == 'OK') {
								this.$message({
									message: '删除成功',
									type: 'success',
								});
							} else {
								this.$message({
									message: res.msg,
									type: 'error',
								});
							}
							this.getRoleList();
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				} else {
					this.$message({
						type: 'info',
						message: '请先选择要删除的角色'
					});
				}
			},
			removeRole(id) {
				this.$confirm('是否删除该角色?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteRole({
						id: id
					}).then(async res => {
						if(res.code == 'OK') {
							this.$message({
								message: '删除成功',
								type: 'success',
							});
						} else {
							this.$message({
								message: res.msg,
								type: 'error',
							});
						}
						this.getRoleList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			dateFormat: function(row, column) {
				var date = row[column.property];
				if(date == undefined) {
					return " ";
				}
				return DateFormat(date, "yyyy-MM-dd hh:mm:ss");
			},
		}
	}
</script>
<style lang="scss" scoped>
	.div-user-top {
		color: rgb(32, 29, 29);
		border-bottom: 1px solid rgba(32, 30, 30, 0.432);
		height: 70px;
		font-size: 20px;
		padding-top: 30px;
		padding-left: 50px;
		margin-bottom: 20px;
	}
	
	.eltreeBox {
		width: 100%;
		height: auto;
		max-height: 400px;
		overflow-y: auto;
	}
</style>